<template>
  <div>
    <div style="width: 60%;text-align: left;margin-left: 0">
      <span
        style="font-size: 48px; display: inline-block;vertical-align: middle;width: 20%"
        >米铺优选</span
      >
      <div
        style="display: inline-block;vertical-align: middle;width: 80%;text-align: center"
      >
        <el-image
          src="/api/image/gg.png"
          style="height: 100%;"
          fit="fill"
          @click="hrefToTbao"
        />
      </div>
    </div>
    <div style="text-align: left">
      <el-button type="primary" icon="el-icon-arrow-left" @click="back"
        >返回</el-button
      >
      <el-upload
        style="display: inline-block;margin-left: 20px"
        action=""
        :limit="1"
        :http-request="upDataApk"
      >
        <el-button type="primary" icon="el-icon-arrow-right">更新apk</el-button>
      </el-upload>
    </div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="width: 60%; margin-left: 0;"
    >
      <el-form-item label="软件图标">
        <el-image
          style="width: 100px; height: 100px ;"
          :src="imageUrl + '/image/' + form.logo"
          fit="cover"
        ></el-image>
        <el-link :href="imageUrl + '/apk/' + form.apk" type="primary"
          >下载安装包</el-link
        >
      </el-form-item>
      <el-form-item label="软件名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="版本号">
        <el-input v-model="form.version"></el-input>
      </el-form-item>
      <el-form-item label="大小">
        <el-input v-model="form.size"></el-input>
      </el-form-item>
      <el-form-item label="软件简介">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="上传时间">
        <el-date-picker
          v-model="form.postdate"
          value-format="timestamp"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="标签">
        <el-radio-group v-model="form.type">
          <el-radio :label="0">常用软件</el-radio>
          <el-radio :label="1">影音软件</el-radio>
          <el-radio :label="2">桌面图标</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="软件截图">
        <div class="img-list">
          <div class="img-content" v-for="(item, key) in fileList" :key="key">
            <el-image fit="scale-down" :src="item.url" style="height: 190px" />
            <div class="name">
              <el-button type="text" @click="delPicture(item)">删除</el-button>
            </div>
            <!-- 放大icon -->
            <div class="layer" @click="handleFileEnlarge(item.url)">
              <i class="el-icon-view"></i>
            </div>
          </div>
        </div>
        <el-dialog
          title=""
          :visible.sync="isEnlargeImage"
          size="large"
          :modal-append-to-body="false"
          top="8%"
          width="60%"
        >
          <img
            @click="isEnlargeImage = false"
            style="width:100%;"
            :src="enlargeImage"
            alt="预览大图"
          />
        </el-dialog>
        <el-upload
          class="upload-demo"
          drag
          :action="imageUrl + '/app/picture'"
          :data="{ id: form.id }"
          :headers="{ Authorization: getAuthorization }"
          :on-success="upSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import router from "@/router";
import { delPicture, getAppByType, putApk, putApp } from "@/api/app";
import { getToken } from "@/utils/authToken";
import ElementUI from "element-ui";

export default {
  name: "AppEdit",
  data() {
    return {
      form: {
        id: null,
        logo: "1602423265822.png",
        name: "软件编辑失效，请选择",
        version: "重新",
        size: "重新",
        description: null,
        postdate: 1602423266200,
        pictures: null,
        type: 0,
        apk: "1602423265799.apk"
      },
      imageUrl: this.$store.state.orgin,
      fileList: [],
      isEnlargeImage: false, //放大图片
      enlargeImage: "" //放大图片地址
    };
  },
  methods: {
    onSubmit() {
      putApp(this.form).then(
        this.$message({
          message: "更新成功",
          type: "success"
        }),
        setTimeout(() => {
          getAppByType(0).then(res => {
            this.$store.dispatch("set_appdata", { item: res, type: 0 });
          }),
            getAppByType(1).then(res => {
              this.$store.dispatch("set_appdata", { item: res, type: 1 });
            }),
            getAppByType(2).then(res => {
              this.$store.dispatch("set_appdata", { item: res, type: 2 });
            });
        }, 2000)
      );
    },
    getParams() {
      // 取到路由带过来的参数
      this.form = this.$route.params.data;
    },
    getPicture() {
      if (this.form.pictures === null) return;
      let split = this.form.pictures.split("|");
      split.forEach(value =>
        this.fileList.push({
          name: value,
          url: this.imageUrl + "/image/" + value
        })
      );
    },
    handleFileEnlarge(_url) {
      //放大图片
      if (_url) {
        this.enlargeImage = _url;
        this.isEnlargeImage = !this.isEnlargeImage;
      }
    },
    delPicture(item) {
      console.log(item);
      delPicture(item.name, this.form.id).then(res => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.fileList = [];
        this.form.pictures = res;
        this.getPicture();
      });
    },
    hrefToTbao() {
      window.location.href = "https://mipuyouxuan.taobao.com/";
    },
    back() {
      router.go(-1);
    },
    upSuccess(response) {
      if (response.code !== 200) {
        ElementUI.Message({
          message: response.message,
          type: "error"
        });
        // 401:未登录;
        if (response.code === 401) {
          router.push({ path: "/login" });
          return;
          //location.reload(); // 为了重新实例化vue-router对象 避免bug
          //location.assign("http://localhost/login");
        }
        return;
      }
      this.fileList = [];
      let data = response.data;
      this.form.pictures = data;
      this.getPicture();
    },
    upDataApk(params) {
      const formData = new FormData();
      formData.append("id", this.form.id);
      formData.append("file", params.file);
      putApk(formData, function(e) {
        const number = ((e.loaded / e.total) * 100) | 0;
        params.onProgress({ percent: number });
      })
        .then(data => {
          this.form = data;
          setTimeout(() => {
            if (data.type === 0) {
              getAppByType(0).then(res => {
                this.$store.dispatch("set_appdata", { item: res, type: 0 });
              });
            } else if (data.type === 1) {
              getAppByType(1).then(res => {
                this.$store.dispatch("set_appdata", { item: res, type: 1 });
              });
            } else {
              getAppByType(2).then(res => {
                this.$store.dispatch("set_appdata", { item: res, type: 2 });
              });
            }
          }, 2000);
        })
        .catch(data => {
          ElementUI.Message({
            message: data.message,
            type: "error"
          });
        });
    }
  },
  created() {
    this.getParams();
    this.getPicture();
  },
  computed: {
    getAuthorization() {
      return getToken();
    }
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.img-list {
  overflow: hidden;
  width: 100%;
}
.img-list .img-content {
  float: left;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 270px;
  padding: 5px;
  margin: 5px 20px 20px 0;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-content img {
  display: block;
  width: 100%;
  height: 190px;
  margin: 0 auto;
  border-radius: 4px;
}
.img-list .img-content .name {
  margin-top: 10px;
}
.img-list .img-content .name > div {
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
  opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
  opacity: 0;
  transition: all 0.3s;
}
.img-list .img-content .del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.img-list .img-content .layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  color: #fff;
  text-align: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
  font-size: 1.6em;
  margin-top: 80px;
}
</style>
